
// 获取卡组列表
function fetchDecks() {
    fetch('/api/deck/list')
        .then(response => response.json())
        .then(data => {
            const deckGrid = document.getElementById('deckGrid');
            deckGrid.innerHTML = '';

            // 添加现有卡组
            data.forEach(deck => {
                const deckElement = createDeckElement(deck);
                deckGrid.appendChild(deckElement);
            });

            // 添加"新建卡组"按钮
            const addNewElement = createAddNewElement();
            deckGrid.appendChild(addNewElement);
        })
        .catch(error => console.error('获取卡组列表失败:', error));
}

// 创建卡组元素
function createDeckElement(deck) {
    const deckDiv = document.createElement('div');
    deckDiv.className = 'deck-card';
    deckDiv.onclick = () => window.location.href = `/deck-builder.html?id=${deck.id}`;

    deckDiv.innerHTML = `
            <img class="deck-cover" src="${deck.coverImage || '/images/deck-cover.png'}" alt="${deck.name}">
            <div class="deck-content">
                <div class="deck-name">${deck.name}</div>
                <div class="deck-info">
                    <div class="deck-info-item">
                        <span class="deck-info-label">角色数量</span>
                        <span class="deck-info-value">${deck.roleCount}</span>
                    </div>
                    <div class="deck-info-item">
                        <span class="deck-info-label">卡牌数量</span>
                        <span class="deck-info-value">${deck.cardCount}</span>
                    </div>
                </div>
            </div>
        `;

    return deckDiv;
}

// 创建"新建卡组"按钮
function createAddNewElement() {
    console.log('createAddNewElement');
    const addNewDiv = document.createElement('div');
    addNewDiv.className = 'deck-card add-new';
    addNewDiv.onclick = () => window.location.href = `/deck-builder.html?id=-1`;

    addNewDiv.innerHTML = `
            <div class="add-icon">+</div>
            <div class="add-text">新建卡组</div>
        `;

    return addNewDiv;
}

// 页面加载时获取数据
window.onload = fetchDecks;